<template>
  <div>
    <div class="mask"></div>
    <div class="create">
      <div class="close" @click="closeModal">x</div>
      <div class="title">创建（需求）订单</div>

      <div class="memo">
        欢迎访问SEAFLO 官网，请填写一下您的信息，我们会尽快和您联系。
      </div>
      <div class="label">
        <span class="star">*</span>
        您的姓名
      </div>
      <input
        type="text"
        class="name"
        v-model="realName"
        placeholder="请输入您的姓名"
      />
      <div class="label">
        <span class="star">*</span>
        个人邮箱
      </div>
      <input
        type="text"
        class="email"
        v-model="email"
        placeholder="请输入您的个人邮箱"
      />
      <div class="label">
        <span class="star">*</span>
        手机号码
      </div>
      <input
        type="text"
        class="mobile"
        v-model="mobile"
        placeholder="请输入您的手机号码"
      />
      <div class="label">您的国家</div>
      <select class="country" v-model="countryId">
        <option
          v-for="(item, index) in countryList"
          :value="item.dictValue"
          :key="index"
        >
          {{ item.dictLabel }}
        </option>
      </select>
      <div class="label">您的行业</div>
      <select class="work" v-model="industryId">
        <option
          v-for="(item, index) in industryList"
          :value="item.id"
          :key="index"
        >
          {{ item.name }}
        </option>
      </select>
      <div class="label">其他备注</div>
      <input
        type="text"
        class="other"
        v-model="memo"
        placeholder="请输入其他备注"
      />

      <div class="cancel" @click="closeModal">取消</div>
      <div class="confirm" @click="createOrder()">确认</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      countryList: [],
      countryId: 1,
      industryList: [
        {
          id: 1,
          name: '房车游艇'
        },
        {
          id: 2,
          name: '工业配套'
        },
        {
          id: 3,
          name: '户外运动'
        }
      ],
      industryId: 1,
      realName: '',
      email: '',
      mobile: '',
      memo: '',
      token: ''
    }
  },
  mounted() {
    this.getCountryList()
    uni.request({
      url: this.apiUrl + 'productApi/createToken',
      method: 'GET',
      header: {
        authorization: '321321321321321322222132'
      },
      success: res => {
        uni.setStorageSync('token', res.data.data.token)
      },
      complete: () => {}
    })
  },
  methods: {
    closeModal() {
      this.$emit('closeModel', false)
    },
    getCartList() {
      uni.request({
        url: this.apiUrl + 'productApi/getCartList',
        method: 'GET',
        header: {
          Authorization: this.getToken()
        },
        success: res => {
          this.list = res.data.data
          this.list.map((item, index) => {
            this.list[index].selected = false
          })
        },
        complete: () => {}
      })
    },
    getCountryList() {
      uni.request({
        url: this.apiUrl + 'productApi/countryList',
        method: 'GET',
        success: res => {
          this.countryList = res.data.data
        },
        complete: () => {}
      })
    },
    validatePhone(phone) {
      var regExp = /^1[3456789]\d{9}$/ //

      if (regExp.test(phone)) {
        return true
      } else {
        return false
      }
    },
    validateEmail(email) {
      var re =
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      return re.test(String(email).toLowerCase())
    },
    createOrder() {
      const self = this
      const orderId = uni.getStorageSync('orderId')
      console.log(orderId)
      if (self.realName == '') {
        self.showToast('请填写您的姓名')
        return false
      }
      if (self.email == '') {
        self.showToast('请填写您的邮箱')
        return false
      }
      if (!self.validateEmail(self.email)) {
        self.showToast('请填写正确邮箱')
        return false
      }
      if (self.mobile == '') {
        self.showToast('请填写手机号码')
        return false
      }
      if (!self.validatePhone(self.mobile)) {
        self.showToast('请填写正确手机号码')
        return false
      }
      const selectedList = self.list.filter(item => item.selected)
      if (selectedList.length == 0) {
        self.showToast('您还没有选择商品')
        return false
      }
      const shoppingCarVOList = selectedList.map(item => {
        return {
          num: item.num,
          productSeriesId: item.productSeriesId,
          productId: item.productId,
          price: item.price
        }
      })
      const data = {
        vo: {
          realName: self.realName,
          email: self.email,
          mobile: self.mobile,
          industryId: self.industryId,
          countryId: self.countryId
        },
        shoppingCarVOList
      }
      if (!!orderId) {
        data.id = orderId
      }

      uni.request({
        url: self.apiUrl + 'productApi/createOrder',
        method: 'POST',
        header: {
          Authorization: self.getToken()
        },
        data: data,
        success: res => {
          if (res.data.code === 0) {
            self.showToast('订单创建成功')
            self.getCartList()
          } else {
            self.showToast(res.data.msg)
          }
          self.closeModal()
        },
        complete: () => {}
      })
    }
  }
}
</script>

<style lang="scss">
.mask {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  position: fixed;
  top: 0;
  left: 0;
}

.create {
  width: 746px;
  height: 800px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: fixed;
  top: 64px;
  left: 50%;
  margin-left: -373px;
  padding-top: 32px;
  padding-left: 32px;

  .close {
    position: absolute;
    top: 24px;
    right: 24px;
    cursor: pointer;
  }

  .title {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    line-height: 20px;
  }

  .memo {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 14px;
    margin-top: 14px;
  }

  .label {
    font-size: 14px;
    font-weight: 500;
    color: #535353;
    line-height: 14px;
    margin-top: 24px;

    .star {
      color: #ff3b30;
      margin-right: 5px;
    }
  }

  input,
  select {
    width: 682px;
    height: 48px;
    background: #ffffff;
    border: 1px solid #dddddd;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #222222;
    line-height: 14px;
  }

  input {
    padding: 10px 20px;
  }

  select {
    padding-left: 20px;
  }

  .cancel {
    width: 112px;
    height: 48px;
    background: #f5f5f7;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    font-weight: 600;
    color: #535353;
    position: absolute;
    right: 156px;
    bottom: 32px;
    cursor: pointer;
  }

  .confirm {
    width: 112px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: #ff590f;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    position: absolute;
    right: 32px;
    bottom: 32px;
    cursor: pointer;
  }
}
</style>
